import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Modal, Form, InputNumber, message } from 'antd';
import moment from 'moment';
import { myMessage } from '../../utils/formatDataSource';
const FormItem = Form.Item;
@connect(({ administration3, loading }) => ({
  administration:administration3,
  loading: loading.models.administration3,
}))
@Form.create()
class TeacherCalendarUpdateForm extends PureComponent {
  constructor(props) {
    super(props);
  }
  state = {
    visible: this.props.updateVisible,
  };
  componentWillUpdate() {
    this.setState({
      visible: this.props.updateVisible,
      selectedEvents: this.props.selectedEvents,
      events: this.props.events,
      selectedEventMinutes: this.props.selectedEventMinutes,
      onCancel: this.props.onCancel,
      onOk: this.props.onOk,
    });
  }
  handleCancel = () => {
    this.props.onCancel();
  };
  handleCreate = () => {
    const form = this.props.form;
    const { selectedEvents, events } = this.state;
    form.validateFields((err, values) => {
      console.log(values, selectedEvents, events);
      if (err) {
        return;
      }
      const { dispatch } = this.props;
      const one = events.find(e => e.id === selectedEvents.id);
      const start = selectedEvents.start;
      const end = moment(new Date(start))
        .add(values.updateTime, 'minutes')
        .toDate();
      one.start = start;
      one.end = end;
      form.resetFields();
      dispatch({
        type: 'administration3/updateLessonDate',
        payload: one,
      }).then(() => {
        const { updateLessonResponse } = this.props.administration;
        if (updateLessonResponse.data == 1) {
          myMessage.success('修改成功', 2);
          this.props.onOk(events);
        }
      });
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { updateVisible, selectedEventMinutes } = this.props;

    return (
      <div>
        <Modal
          visible={updateVisible}
          title="修改时长"
          okText="确定"
          onCancel={this.handleCancel}
          onOk={this.handleCreate}
        >
          <Form layout="inline">
            <FormItem label="请选择时长">
              {getFieldDecorator('updateTime', {
                initialValue: selectedEventMinutes,
                rules: [{ required: true, message: '请选择时长' }],
              })(
                <InputNumber
                  min={30}
                  max={999}
                  formatter={value => `${value}分钟`}
                  parser={value => value.replace('分钟', '')}
                />
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default TeacherCalendarUpdateForm;
